Сохранить цвет от нажатия на кнопку после перенаправления страницы

Question

Когда я нажимаю на кнопку, цвет кнопки меняется правильно. Однако, когда вы нажимаете на кнопку, она перенаправляет на маршрут приложения. Как сделать так, чтобы цвет от нажатия на кнопку оставался после загрузки страницы?

base. html:

button_click. js:

$('.button-holder').click( function () {
    $(this).toggleClass('active_button');
});

панель приборов. css:

.button-holder:active, .active_button {
      background-color: #992200;
}

Answer 1

Вы можете добавить значение в localStorage, а затем на новой странице проверить его и снова назначить кнопке. Также обратите внимание, что localstorage сохранил значение нажатой кнопки только для вашего устройства, а не глобально. Кроме того, пожалуйста, измените тег привязки, если вы хотите использовать ссылки. Попробуйте так:

HTML:

<div class="button-holder">
            <a href="/orange" class="navbtn" id="orange-btn">Orange</a>
        </div>
        <div class="button-holder">
            <a href="/banana" class="navbtn" id="banana-btn">Banana</a>
        </div>
        <div class="button-holder">
            <a href="/apple" class="navbtn" id="apple-btn" >Apple</a>
        </div>

JS:

$(function(){

    var button_index = localStorage.getItem('button_index');
    if(button_index ){
        $('.button-holder').eq(button_index).addClass('active_button');
    }


    $('.button-holder').click( function (e) {
        e.preventDefault();

        var url = window.location   + $(this).find("a").attr('href');
        var button_index = $(this).index();
        $(this).toggleClass('active_button');
        localStorage.setItem('button_index', button_index - 1 );
        window.location = url;
    });



})

Answer 2

Поскольку вы находитесь на новой странице, вам необходимо определить, на какой странице вы находитесь, и активировать соответствующую кнопку.

    window.onOpen = function () {
        const thisURL = window.location;
        if (thisURL.includes('/orange') {
            document.getElementById('orange-btn').classList.add('active-class');
        }
        /* and so forth for the other buttons */
    }